<template>
  <!-- 抽查项目统计-->
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="form-container">
      <el-form
        ref="queryForm"
        :model="filters"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="项目编号" prop="proNum">
          <el-input v-model="filters.proNum" placeholder="请输入项目编号" clearable size="small" />
        </el-form-item>
        <el-form-item label="项目名称" prop="proName">
          <el-input v-model="filters.proName" placeholder="请输入项目名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="时间">
          <label slot="label" v-html="`时&emsp;&emsp;间`" />
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="true"
            @change="dateChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      <el-button v-clickForbidden icon="el-icon-download" size="mini" @click="exportData">导出</el-button>
    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :span-method="objectSpanMethod"
      :data="tableData"
      :summary-method="getSummaries"
      show-summary
      class="table-list"
      :row-style="rowClass"
    >
      <!--      <el-table-column type="index" label="序号" width="51" align="center" />-->
      <el-table-column
        prop="proName"
        label="项目名称"
        min-width="180"
        align="left"
        header-align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="proNum"
        label="项目编号"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="项目等级"
        align="center"
        min-width="150 "
        prop="proLevel"
        :formatter="formatGrade"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总合同金额(万元)"
        align="center"
        width="180"
        prop="contractAmount"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          {{ divideMoney(row.contractAmount,6,true) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { exportCheckProjectInfo, selectCheckProjectInfo } from '@/api/statisticalAnalysis/SpotCheckItems'
import { dataMethod } from '@/utils/tableObjectSpanMethod'
import { mapState } from 'vuex'
export default {
  name: 'SpotCheckItems',
  data() {
    return {
      /* 搜索条件 start*/
      highLevelSet: false, // 高级搜索
      dateRange: [], // 时间范围数组
      filters: { // 查询参数
        proNum: '', // 项目编号
        proName: '', // 项目名称
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      /* 搜索条件 end*/

      /* 列表 start*/
      tableData: [], // 列表
      selectRow: [], // 高亮数组
      loading: false,
      spanObj: {}
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView,
      proGrade: state => state.basicInfo.proGrade
    })
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 选择时间
    dateChange(e) {
      this.filters.statisticsStartTime = e[0]
      this.filters.statisticsEndTime = e[1]
    },
    // 翻译项目等级
    formatGrade(row) {
      return this.selectDictLabel(this.proGrade, row.proLevel)
    },
    // 表格合计
    getSummaries(param) {
      const { data } = param
      const total = data.reduce((pre, row) => pre + row.contractAmount, 0)
      return ['总计', '', '', this.divideMoney(total, 6, true)]
    },
    /* 列表 start*/
    // 处理表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    // 获取列表
    async getList() {
      this.loading = true
      try {
        const { data } = await selectCheckProjectInfo(this.filters)
        this.tableData = data
        this.spanObj = dataMethod(this.tableData, ['proName', 'proCode', 'level'], 'proName')
        this.loading = false
        // this.addTaleData()
      } catch {
        this.loading = false
      }
    },
    // list表格填充空白行
    addTaleData() {
      const arr = {}
      if (this.tableData.length < this.filters.pageSize) {
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 搜索方法
    handleQuery() {
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.orgLeaderName = ''
      this.dateRange = []
      this.filters.statisticsStartTime = ''
      this.filters.statisticsEndTime = ''
      this.handleQuery()
    },
    // 导出
    async exportData() {
      const tableHeader = [
        { 'key': 'proName', 'label': '项目名称' },
        { 'key': 'proNum', 'label': '项目编号' },
        { 'key': 'proLevel', 'label': '项目等级' },
        { 'key': 'contractAmount', 'label': '总合同金额(万元)' }
      ]
      const res = await exportCheckProjectInfo(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '巡检项目统计')
    }
    /* 列表 end*/
  }
}
</script>
<style lang="scss" scoped>
</style>
